<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"
	   xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
	<base th:href="${url}"><base th:href="${url}">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

<script type="text/javascript">

	$(function(){


		$("#createOrderBtn").click(function (){
			$("#createOrderForm").get(0).reset();
			//弹出模态窗口
			$("#createOrderModal").modal("show");
		})

		$("#saveCreateOrder").click(function () {

			//收集参数
			var type= $("#createOrderGoodsType").val();
			var address= $.trim($("#createAddress").val());
			var content = $("#createContent").val();


			if (address == ""){
				alert("地址不能为空")
				return;
			}

			//数据提交
			$.ajax({
				url:"/workbench/client/order/saveCreateOrder",
				data:{
					type: type,
					address: address,
					content: content
				},
				type :'post',
				dataType:'json',
				success:function (data) {
					if (data.code == "1"){
						$("#createorderModal").modal("hide");
						//刷新市场活动，展示第一页
						queryOrder(1,$("#pageTurning").bs_pagination("getOption","rowsPerPage"))
					}else {
						alert(data.message);
						$("#createOrderModal").modal("show");
					}
				}

			})
		})

		$(".myDate").datetimepicker({
			language:'zh-CN',
			format:'yyyy-mm-dd',
			minView:'month',
			initialDate:new Date(),
			autoclose:true,
			todayBtn:true,
			clearBtn:true
		})

		function lisOrder(list){
			var htmls = "";
			$.each(list,function (index,obj) {
				htmls += "<tr className = \"active\">";
				htmls += "<td> <input type = \"checkbox\" value="+obj.id+" /> </td>";
				htmls += "<td><a style=\"text-decoration: none; cursor: pointer;\" onClick=\"window.location.href='detail.html'; \">"+obj.type+"</a></td>";
				htmls += "<td >"+obj.sender+"</td>";
				htmls += "<td >"+obj.createTime+"</td>";
				htmls += "<td>"+obj.state+"</td>";
				htmls += "</tr>";
			})
			$("#orderALl").prop("checked",false);
			return htmls;
		}

		function queryOrder(pageNum,pageSize) {
			var queryName = $("#queryName").val();
			var queryOwner = $("#queryOwner").val();
			var queryStartDate = $("#queryStartDate").val();
			var queryEndDate = $("#queryEndDate").val();
			$.ajax({
				url: "workbench/activity/queryActivityByConditionForPage/" + pageNum + "/" + pageSize,
				data: {
					owner: queryOwner,
					name: queryName,
					startDate: queryStartDate,
					endDate: queryEndDate,
				},
				type: 'post',
				dataType: 'json',
				success: function (data) {
					$("#pageTurning").bs_pagination({
						currentPage: data.pageNum,

						rowsPerPage: data.pageSize,
						totalRows: data.total,
						totalPages: data.pages,
						visiblePageLinks: 7,

						showGoToPage: true,
						showRowsPerPage: true,
						showRowsInfo: true,

						onChangePage: function (event, pageObj) {
							queryActivity(pageObj.currentPage, pageObj.rowsPerPage)
						}
					})
					$("#showActivity").html(lisActivity(data.list))
				}
			})
		}

		queryOrder(1,7);
		$("#queryOrderBtn").click(function (){
			queryOrder(1,$("#pageTurning").bs_pagination("getOption","rowsPerPage"));
		})

		//全选和取消全选
		$("#OrderALl").click(function (){
			$("#showOrder input[type='checkbox']").prop("checked",this.checked)
		})
		$("#showOrder").on("click","input[type='checkbox']",function (){
			if($("#showOrder input[type='checkbox']").size() ==
			$("#showOrder input[type='checkbox']:checked").size()){
				$("#orderALl").prop("checked",true)
			}else {
				$("#orderALl").prop("checked",false)
			}
		})

		// $("#deleteActivityBtn").click(function (){
		// 	 var ids = $("#showActivity input[type='checkbox']:checked");
		// 	 if (ids.size() == 0){
		// 		 alert("请选中要删除数据");
		// 		 return
		// 	 }
		// 	 var idArray = new Array();
		// 	 $.each(ids,function (){
		// 		 idArray.push(this.value);
		// 	 })
		// 	$.ajax({
		// 		url:"workbench/activity/deleteActivityByIds",
		// 		data:{
		// 			ids:idArray
		// 		},
		// 		type :'post',
		// 		traditional:true,
		// 		dataType:'json',
		// 		success:function (data) {
		// 			if (data.code){
		// 				alert("删除成功");
		// 				queryActivity(1,$("#pageTurning").bs_pagination("getOption","rowsPerPage"));
		// 			}else {
		// 				alert(data.message);
		// 			}
		// 		}
		//
		// 	})
		// })
		
		// $("#updateActivityBtn").click(function () {
		// 	var checkedId = $("#showActivity input[type='checkbox']:checked");
		// 	if (checkedId.size() == 0){
		// 		alert("你还没有选中要修改的市场活动");
		// 		return;
		// 	}
		// 	if (checkedId.size() != 1){
		// 		alert("每次只能选择一条数据");
		// 		return;
		// 	}
		// 	var id = checkedId.get(0).value;
		// 	$.ajax({
		// 		url:"workbench/activity/queryActivityById",
		// 		data:{
		// 			id:id
		// 		},
		// 		type :'post',
		// 		dataType:'json',
		// 		success:function (data) {
		// 			$("#editId").val(data.id);
		// 			$("#edit-marketActivityOwner").val(data.owner);
		// 			$("#edit-marketActivityName").val(data.name);
		// 			$("#edit-startDate").val(data.startDate);
		// 			$("#edit-endDate").val(data.endDate);
		// 			$("#edit-cost").val(data.cost);
		// 			$("#edit-description").val(data.description);
		//
		// 			$("#editActivityModal").modal("show");
		// 		}
		//
		// 	})
		// })



		// $("#saveEditCreateActivity").click(function () {
		//
		// 	//收集参数
		// 	var id = $("#editId").val();
		// 	var owner = $("#edit-marketActivityOwner").val();
		// 	var name = $.trim($("#edit-marketActivityName").val());
		// 	var startDate = $("#edit-startDate").val();
		// 	var endDate = $("#edit-endDate").val();
		// 	var cost = $.trim($("#edit-cost").val());
		// 	var description = $.trim($("#edit-description").val());
		//
		// 	//表单验证
		// 	if(owner == ""){
		// 		alert("所有者不能为空");
		// 		return;
		// 	}
		// 	if (name == ""){
		// 		alert("名称不能为空")
		// 		return;
		// 	}
		//
		// 	//数据提交
		// 	$.ajax({
		// 		url:"workbench/activity/saveEditCreateActivity",
		// 		data:{
		// 			id : id,
		// 			owner : owner,
		// 			name : name,
		// 			startDate : startDate,
		// 			endDate : endDate,
		// 			cost : cost,
		// 			description : description
		// 		},
		// 		type :'post',
		// 		dataType:'json',
		// 		success:function (data) {
		// 			if (data.code == "1"){
		// 				$("#editActivityModal").modal("hide");
		// 				//刷新市场活动，展示当前页
		// 				queryActivity($("#pageTurning").bs_pagination("getOption","currentPage"),$("#pageTurning").bs_pagination("getOption","rowsPerPage"));
		// 			}else {
		// 				alert(data.message);
		// 				$("#editActivityModal").modal("show");
		// 			}
		// 		}
		//
		// 	})
		// })

	});
	
</script>
</head>
<body>

	<!-- 创建物流订单的模态窗口 -->
	<div class="modal fade" id="createOrderModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建物流订单</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" id="createOrderForm" role="form">
					
						<div class="form-group">
							<label for="createOrderGoodsType" class="col-sm-2 control-label">物品类型<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="createOrderGoodsType">
								  <option th:each="g:${goods}"
								  	th:value="${g.id}" th:text="${g.value}"
								  >纺织品</option>
								</select>
							</div>
							<label for="createAddress" class="col-sm-2 control-label">地址<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="searchAddress" placeholder="请输入账号">
								<select class="form-control" id="createAddress">
									<option value="">请选择</option>
									<option value="address1">地址1</option>
									<option value="address2">地址2</option>
									<option value="address3">地址3</option>
								</select>
								<div id="addressDiv"></div>
							</div>
						</div>


						<div class="form-group">
							<label for="createContent" class="col-sm-2 control-label">物流物品描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="createContent"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="saveCreateOrder">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改市场活动的模态窗口 -->
	<div class="modal fade" id="editOrderModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel2">修改物流订单</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<input type="hidden" id="editId">
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-marketActivityOwner">
									<option th:each="user:${users}"
											th:value="${user.id}" th:text="${user.name}"
									>张三</option>
								</select>
							</div>
                            <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
                            </div>
						</div>

						<div class="form-group">
							<label for="edit-startDate" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control myDate" id="edit-startDate" value="2020-10-10" readonly>
							</div>
							<label for="edit-endDate" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control myDate" id="edit-endDate" value="2020-10-20" readonly>
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-cost" class="col-sm-2 control-label">成本</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-cost" value="5,000">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-description" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-description">市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="saveEditCreateActivity">更新</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 导入市场活动的模态窗口 -->
    <div class="modal fade" id="importOrderModal" role="dialog">
        <div class="modal-dialog" role="document" style="width: 85%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
                </div>
                <div class="modal-body" style="height: 350px;">
                    <div style="position: relative;top: 20px; left: 50px;">
                        请选择要上传的文件：<small style="color: gray;">[仅支持.xls]</small>
                    </div>
                    <div style="position: relative;top: 40px; left: 50px;">
                        <input type="file" id="activityFile">
                    </div>
                    <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" >
                        <h3>重要提示</h3>
                        <ul>
                            <li>操作仅针对Excel，仅支持后缀名为XLS的文件。</li>
                            <li>给定文件的第一行将视为字段名。</li>
                            <li>请确认您的文件大小不超过5MB。</li>
                            <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
                            <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
                            <li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
                            <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
                </div>
            </div>
        </div>
    </div>
	
	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>物流订单列表</h3>
			</div>
		</div>
	</div>
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="queryName">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text" id="queryOwner">
				    </div>
				  </div>


				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">开始日期</div>
					  <input class="form-control" type="text" id="queryStartDate" />
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">结束日期</div>
					  <input class="form-control" type="text" id="queryEndDate">
				    </div>
				  </div>
				  
				  <button id="queryOrderBtn" type="button" class="btn btn-default">查询</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" id="createOrderBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-default" data-toggle="modal" id="updateOrderBtn"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" class="btn btn-danger" id="deleteOrderBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				</div>
				<div class="btn-group" style="position: relative; top: 18%;">
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#importOrderModal" ><span class="glyphicon glyphicon-import"></span> 上传列表数据（导入）</button>
                    <button id="exportOrderAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）</button>
                    <button id="exportOrderXzBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）</button>
                </div>
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" id="orderALl"/></td>
							<td>物品类型</td>
                            <td>发货者</td>
							<td>创建时间</td>
							<td>揽件状态</td>
						</tr>
					</thead>
					<tbody id="showOrder">

					</tbody>
				</table>
			</div>
			<div id="pageTurning"></div>
			
		</div>
		
	</div>
</body>
</html>